<template>
  <!-- 搜索区域 -->
  <div class="app-container">
    <el-form size="mini" :inline="false" :model="searchForm" label-width="40px" label-position="left">
      <div :class="advanced ? null: 'fold'">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="账号">
              <el-input v-model="searchForm.username" placeholder="请输入账号" @keyup.enter.native="searchUserHandle" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机">
              <el-input v-model="searchForm.username" placeholder="请输入手机" @keyup.enter.native="searchUserHandle" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="searchForm.username" placeholder="请输入邮箱" @keyup.enter.native="searchUserHandle" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="advanced" :gutter="20">
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select placeholder="请选择状态" clearable style="width: 100%" v-model="searchForm.status">
                <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="次数">
              <el-input v-model="searchForm.username" placeholder="请输入登录次数" @keyup.enter.native="searchUserHandle" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期">
              <el-date-picker
                style="width: 100%"
                v-model="searchForm.createTime"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div style="float: right;">
        <el-form-item>
          <el-button type="primary" :loading="searchLoading" @click="searchUserHandle">
            查询
          </el-button>
          <el-button @click="searchUserHandle">
            重置
          </el-button>
          <el-link type="primary" :underline="false" @click="advanced = !advanced">
            {{advanced ? '收起' : '展开'}}
            <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </el-link>
        </el-form-item>
      </div>
    </el-form>
    <div style="margin-bottom: 19px;">
      <el-button type="success" size="mini" icon="el-icon-plus" @click="insertHandle()">添加</el-button>
      <el-button type="danger" size="mini" icon="el-icon-delete" @click="insertHandle()">删除</el-button>
      <!--<el-alert type="success" show-icon :closable="false">已选择10条数据</el-alert>-->
    </div>
    <!--数据表格-->
    <el-table v-loading="listLoading" element-loading-text="加载中，请稍后..." size="mini" border fit highlight-current-row :data="userList" @selection-change="selectionChangeHandle">
      <!--展开行-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="账号">
              <span> {{ props.row.username }} </span>
            </el-form-item>
            <el-form-item label="手机">
              <span> {{ props.row.phone }} </span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span> {{ props.row.email }} </span>
            </el-form-item>
            <el-form-item label="角色">
              <el-tag v-for="role in props.row.roleNames" :key="role.id" size="mini" effect="dark" style="margin-right: 2px" :type="role | roleTypeFilter">
                {{ role }}
              </el-tag>
            </el-form-item>
            <el-form-item label="创建时间">
              <span> {{ props.row.createTime }} </span>
            </el-form-item>
            <el-form-item label="更新时间">
              <span> {{ props.row.updateTime }} </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--列表-->
      <el-table-column prop="id" type="selection" fixed />
      <el-table-column label="账号" prop="username" />
      <el-table-column label="手机" prop="phone" />
      <el-table-column label="邮箱" prop="email" />
      <el-table-column label="状态" align="center" width="70">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.status | statusFilter">
            {{ scope.row.status | statusTextFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <el-avatar :size="25" :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span> {{ scope.row.createTime }} </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateHandle(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background :current-page="searchForm.currentPage" :page-sizes="[3, 20, 30, 50, 100, 200, 300, 400]" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="searchForm.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <!-- 添加用户 -->
    <user-insert :visible.sync="insertVisible" @reloadTable="searchUserHandle" />
    <!-- 更新用户 -->
    <user-update :visible.sync="updateVisible" :user-id="userId" @reloadTable="searchUserHandle" />
  </div>
</template>

<script>
import UserInsert from './components/user-insert'
import UserUpdate from './components/user-update'
import { getIds } from '@/utils/system'

export default {
  components: {
    'user-insert': UserInsert,
    'user-update': UserUpdate
  },
  filters: {
    statusFilter(status) {
      const statusMap = { 0: 'success', 1: 'gray', 2: 'danger' }
      return statusMap[status]
    },
    statusTextFilter(status) {
      const statusTextMap = { 0: '正常', 1: '冻结', 2: '删除' }
      return statusTextMap[status]
    },
    roleTypeFilter(name) {
      const roleTypeMap = { 'ADMIN': '', 'TEACHER': 'success', 'STUDENT': 'warning' }
      return roleTypeMap[name]
    }
  },
  data() {
    return {
      // 高级搜索 展开|收缩
      advanced: false,
      statuses: [
        {value: 0, label: '正常'},
        {value: 1, label: '禁用'},
        {value: 2, label: '删除'}
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      userList: null,
      listLoading: true,
      roles: [],
      searchForm: {
        username: '',
        email: '',
        status: '',
        createTime: '',
        // 分页
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      searchLoading: false,
      multipleSelection: [],
      // 子组件使用
      insertVisible: false,
      updateVisible: false,
      userId: null
    }
  },
  created() {
    this.listUserHandle()
  },
  methods: {
    listUserHandle() {
      this.listLoading = true
      this.http.get('/users', this.searchForm, false).then((response) => {
        this.userList = response.data
        this.roles = response.data.roles
        this.listLoading = false
        this.searchLoading = false
        // 分页
        this.searchForm.total = response.total
      }).catch(() => {
        this.listLoading = false
        this.searchLoading = false
      })
    },
    searchUserHandle() {
      this.searchLoading = true
      this.searchForm.currentPage = 1
      this.searchForm.pageSize = 20
      this.listUserHandle()
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.listUserHandle()
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val
      this.listUserHandle()
    },
    selectionChangeHandle(val) {
      this.multipleSelection = val
    },
    insertHandle() {
      this.insertVisible = true
    },
    updateHandle(row) {
      this.updateVisible = true
      this.userId = row.id
    },
    deleteHandle(row) {
      const ids = getIds(row, this.multipleSelection)
      this.ComponentUtils.confirm({
        confirmCallBack: ({ loadingClose }) => {
          this.http.delete(`/user/${ids}`).then(() => {
            loadingClose()
            this.listUserHandle()
          }).catch(() => {
            loadingClose()
          })
        }
      }).catch(() => {
        // 点击了取消
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .fold {
    width: calc(100% - 216px);
    display: inline-block
  }

  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }

  .table-expand {
    font-size: 0;

    label {
      width: 90px;
      color: #99a9bf;
    }

    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }

  .el-pagination {
    padding: 10px 0 0 0;
  }
</style>
